/**
 * Copyright 2022, 2023 IBM Corp.
 *
 * Licensed under the Apache License, Version 2.0 (the 'License');
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 **/
 
 .mq--progress-bar--progress {
  color: 'red';
}
.queue-image {
  position: absolute;
  right: 5px;

  background-image: url('ibm--mq.svg');
  height: 32px;
  width: 32px;
  background-repeat: no-repeat;
}

.touchdevice-flow .react-flow__handle {
  width: 10px;
  height: 30px;
  border-radius: 3px;
  background-color: #c8ea7a;
}

.touchdevice-flow .react-flow__handle.connecting {
  animation: bounce 1600ms infinite ease-out;
}

@keyframes bounce {
  0% {
    transform: translate(0, -50%) scale(1);
  }
  50% {
    transform: translate(0, -50%) scale(1.1);
  }
}

.edgebutton {
  width: 20px;
  height: 20px;
  background: #bdc9e0;
  border: 1px solid #fff;
  color: rgb(255, 255, 255);
  cursor: pointer;
  border-radius: 50%;
  font-size: 10px;
  line-height: 1;
}

.edgebutton.node {
  position: absolute;
  top: -10px;
  right: -7px;
}

.edgebutton:hover {
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.08);
}

.edgebutton-foreignobject body {
  background: transparent;
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 40px;
}

.messageOnEdge {
  width: 35px;
  height: 30px;
  background-color: #0059ff;
  cursor: pointer;
  z-index: 10000;
  -webkit-mask: url(email.svg) no-repeat center;
  mask: url(email.svg) no-repeat center;
}

.queue-node-container {
  border: 1px dashed;
  padding: 5px;
  width: 500px;
}

.topic-node-container {
  border: 1px dashed;
  padding: 5px;
  width: 150px;
  height: 100px;
  border-radius: 50px;
  background-color: greenyellow;
}
.topic-text-input {
  background-color: greenyellow;
}

.topic-label {
  margin-left: 35%;
  margin-top: 10%;
  font-weight: bold;
}

.topic-name-label {
  margin-left: 5px;
  margin-top: 10%;
  font-weight: bold;
}

.producer-node-container {
  border: 1px dashed;
  padding-left: 10px;
  padding-bottom: 10px;
  padding-right: 10px;
}

.consumer-node-container {
  border: 1px dashed;
  padding-left: 10px;
  padding-bottom: 10px;
}

.subscriber-node-container {
  border: 1px dashed;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  width: 450px;
}

.topic-node-container:hover,
.queue-node-container:hover,
.consumer-node-container:hover,
.subscriber-node-container:hover,
.producer-node-container:hover,
.publisher-node-container:hover {
  box-shadow: 0px 0px 5px 0px;
}

.container-node-container {
  width: 750px;
  height: 250px;

  border-radius: 5%;
  /* border: 2px solid orange; */
}

.container-node-container-name {
  position: absolute;
  right: 10px;
  bottom: 10px;
  color: orange;
  font-weight: bold;
}


.producer-node-send-button {
  height: 30px;
  text-align: center;
  padding-top: 5px;
  margin-top: 10px;
  width: 100%;
}

.publisher-node-send-button {  
  height: 35px;
  text-align: center;
  padding-top: 5px;  
  text-align: center;  
  width: 100%;    
  margin-left: 7%;
  text-align: center;  
  font-size: 1.2em;
}

.consumer-node-name-label,
.producer-node-name-label {
  font-size: 1em;
  font-weight: bold;
  margin-top: 5px;
  margin-bottom: 5px;
}

.consumer-subsection-title {
  font-weight: bolder;
}

.column-margin-top-10 {
  margin-top: 10px;
}
.column-margin-top-5 {
  margin-top: 5px;
}

.list-columnd-width {
  width: 30px;
}

.container {
  display: flex;
  flex-direction: row;
  height: 100vh;
}

.left-col {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #ddd;
}

.center-col {
  flex: 1;
  height: 50px;
  overflow-y: scroll;
}

.right-col {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #e7e7e7;
}

.toggle-width {
  width: 20px;
}

.dndflow {
  flex-direction: column;
  display: flex;
  flex-grow: 1;
  height: 100%;
}

.dndflow aside {
  border-right: 1px solid rgb(220, 217, 217);
  padding: 15px 10px;
  font-size: 12px;
}

.dndflow aside .description {
  margin-bottom: 10px;
}

.dndflow .dndnode {
  box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.08);
  width: 150px;
  height: 150px;
  margin-top: 5px;
  background-size: contain;
  background-repeat: no-repeat;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: grab;
}

.dndflow .dndnode:hover {
  box-shadow: 0 0 0 0 rgb(188, 190, 195);
  transform: scale(1);
  animation: pulse-sidebar 2s infinite;
}

.dndflow .dndnode.producer {
  background-image: url('producer.png');
}

.dndflow .dndnode.consumer {
  height: 65px !important;
  background-image: url('consumer.png');
}

.dndflow .dndnode.queue {
  height: 40px !important;
  background-image: url('queue.png');
}

.dndflow .dndnode.publisher {
  height: 120px !important;
  background-image: url('publisher.png');
}

.dndflow .dndnode.subscriber {
  height: 65px !important;
  background-image: url('subscriber.png');
}

.dndnode.topic {
  height: 70px !important;

  background-image: url('topic.png');
}

.reset {
  width: 150px;
  height: 30px;
  margin-top: 200%;
}

.dndflow .reactflow-wrapper {
  flex-grow: 1;
  height: 100%;
}

.dndflow .selectall {
  margin-top: 10px;
}

@media screen and (min-width: 768px) {
  .dndflow {
    flex-direction: row;
  }

  .dndflow aside {
    width: 20%;
    max-width: 250px;
  }
}

.onAction-orange-border {
  border: red;
}

.blob {
  box-shadow: 0 0 0 0 rgb(0, 47, 255);
  transform: scale(1);
  animation: pulse-black 2s infinite;
}

@keyframes pulse-black {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgb(0, 47, 255, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 10px rgb(0, 47, 255, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgb(0, 47, 255, 0);
  }
}

@keyframes pulse-sidebar {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0px rgba(233, 145, 22, 0.359);
  }

  70% {
    transform: scale(0.75);
    box-shadow: 0 0 0 0px rgba(100, 71, 7, 0.944);
  }

  80% {
    transform: scale(1.2);
    box-shadow: 0 0 0 7px rgba(237, 140, 5, 0.473);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0px rgba(233, 145, 22, 0.359);
  }
}
